<template>
  <div id="exApp">
    <div class="abc">123123</div>
    <el-collapse accordion class="right-fixbox">
      <el-collapse-item class="rf-top" title="试卷科目: 数据采集">
      <div class="rf-main">
        <dl class="clear-fix">
          <dt class="rf-blue">单选题</dt>
          <dd class="rf-blue">
            <span class="rf-number">10</span>题目
          </dd>
          <dd class="rf-blue">
            <span class="rf-number">25</span>得分
          </dd>
          <dd class="rf-green">
            <span class="rf-number">05</span>正确
          </dd>
          <dd class="rf-red">
            <span class="rf-number">10</span>错误
          </dd>
        </dl>
        <dl class="clear-fix">
          <dt class="rf-blue">单选题</dt>
          <dd class="rf-blue">
            <span class="rf-number">10</span>题目
          </dd>
          <dd class="rf-blue">
            <span class="rf-number">25</span>得分
          </dd>
          <dd class="rf-green">
            <span class="rf-number">05</span>正确
          </dd>
          <dd class="rf-red">
            <span class="rf-number">10</span>错误
          </dd>
        </dl>
        <dl class="clear-fix">
          <dt class="rf-blue">单选题</dt>
          <dd class="rf-blue">
            <span class="rf-number">10</span>题目
          </dd>
          <dd class="rf-blue">
            <span class="rf-number">25</span>得分
          </dd>
          <dd class="rf-green">
            <span class="rf-number">05</span>正确
          </dd>
          <dd class="rf-red">
            <span class="rf-number">10</span>错误
          </dd>
        </dl>
        <dl class="clear-fix">
          <dt class="rf-blue">单选题</dt>
          <dd class="rf-blue">
            <span class="rf-number">10</span>题目
          </dd>
          <dd class="rf-blue">
            <span class="rf-number">25</span>得分
          </dd>
          <dd class="rf-green">
            <span class="rf-number">05</span>正确
          </dd>
          <dd class="rf-red">
            <span class="rf-number">10</span>错误
          </dd>
        </dl>
        <dl class="clear-fix">
          <dt class="rf-blue">单选题</dt>
          <dd class="rf-blue">
            <span class="rf-number">10</span>题目
          </dd>
          <dd class="rf-blue">
            <span class="rf-number">25</span>得分
          </dd>
          <dd class="rf-green">
            <span class="rf-number">05</span>正确
          </dd>
          <dd class="rf-red">
            <span class="rf-number">10</span>错误
          </dd>
        </dl>
        <div class="rf-score rf-blue">
          总分数：
          <span class="rf-number">120</span>分
        </div>
      </div>
      </el-collapse-item>
    </el-collapse>
    <div class="jx-content">演示班级--系统-同学.试卷批阅</div>
    <div class="jx-content">
      <div class="font16">试卷科目: 数据采集</div>
      <ul>
        <li>单选题: 共10题 得分0分 正确0题 错误10题</li>
        <li>多选题: 共0题 得分0分 正确0题 错误0题</li>
        <li>判断题: 共0题 得分0分 正确0题 错误0题</li>
        <li>填空题: 共10题 得分0分</li>
        <li>简答题: 共8题 得分0分</li>
      </ul>
      <p class="c-blue">总分数：0</p>
      <br>
      <p
        class="c-red"
      >提示：当前实验评价的设置为100.00~90.00分为‘优’，80.00~89.00分为‘良’，60.00~79.00分为‘中’，0~59.00分为‘差’，该设置可以在‘成绩设置’的‘评价设置’中更改。</p>
    </div>
    <div class="jx-content test-question">
      <h2 class="tq-title">一、单选题(每题10分，共10题)</h2>
      <dl v-for="(item,index) in data">
        <dt>
          {{ index+1 }}.{{ item.title }}
          (
          <span class="underline">{{ item.studentKey }}</span>
          )
          ({{ item.score }}分)
          <span class="c-blue">正确答案：{{ item.rightKey }}</span>
        </dt>
        <dd v-for="(score,indexKey) in item.key">{{ qKey[indexKey] + '. ' + score }}</dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
//   ## 试卷展示的模板
// {
// 	name: "考试试卷",
// 	time: 120,
// 	score: 100,
// 	content: [{
// 		questionType: 1,
// 		questionTypeName: "选择题",
// 		questionScore: 5,
// 		content: [{
// 			number: 1,
// 			questionContent: "世界上是先有鸡还是先有蛋",
// 			answer: "",
// 			answerList: [{
// 				number: 1,
// 				answerContent: "先有鸡",
// 				rightAnswer: false
// 			},{
// 				number: 2,
// 				answerContent: "先有蛋",
// 				rightAnswer: true
// 			},{
// 				number: 1,
// 				answerContent: "两者皆不对",
// 				rightAnswer: false
// 			}]
// 		}]
// 	},{
// 		questionType: 2,
// 		questionTypeName: "判断题",
// 		questionScore: 2,
// 		content: [{
// 			number: 2,
// 			questionContent: "一加一不等于二",
// 			answer: false,
// 			answerList: []
// 		}]
// 	},{
// 		questionType: 3,
// 		questionTypeName: "填空题",
// 		questionScore: 2,
// 		content: [{
// 			number: 3,
// 			questionContent: "墙面装饰分为(+)和(+),不同的墙面有着不同的装饰效果和功能",
// 			answer: "不知道，我也不清楚",
// 			answerList: []
// 		}]
// 	}]
// }
  data() {
    return {
      qKey: ["A", "B", "C", "D"],
      data: [
        {
          //标题
          title: "以下属于大数据发展原动力的选项有：",
          //选项
          key: [
            "硬件技术的发展",
            "电子数据激增",
            "数据潜在的经济价值",
            "国内国际政策法规的推动"
          ],
          //学生答案
          studentKey: "BC",
          //正确答案
          rightKey: "ABCD",
          //分数
          score: 10
        },
        {
          title: "以下属于大数据的作用与意义的选项有：",
          key: [
            "改变经济社会管理方式",
            "促进行业融合发展",
            "推动产业转型升级",
            "助力智慧城市建设"
          ],
          studentKey: "BC",
          rightKey: "AD",
          score: 10
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {}
  }
};
</script>
<style lang="scss">
@import '../../styles/layout/color_variables';
body {
  background: #f8f8f8;
}
#exApp {
  .abc{
    @include fs($fs24);
    color:$blue;
  }
  width: 1200px;
  height: 4000px;
  margin: 0 auto;
  background: #f8f8f8;
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  .c-blue {
    color: #385899;
  }
  .c-red {
    color: #ff4240;
  }

  .test-question {
  }
  //考试右侧悬浮框
  .right-fixbox {
    width: 500px;
    position: fixed;
    top: 200px;
    right: 50px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 30px #dfdfdf;
    .rf-top,.el-collapse-item__header{
      height: 70px;
      line-height: 70px;
      font-size: 18px;
      color: #474747;
      border-bottom: 1px solid #dfdfdf;
    }
    .el-collapse-item__header{
      padding-left: 24px;
    }
    .rf-main,.el-collapse-item__wrap{
      .rf-blue {
        color: #385899;
      }
      .rf-green {
        color: #0bc6a0;
      }
      .rf-red {
        color: #fc1c44;
      }
      .rf-number {
        font-size: 24px;
      }
      dl {
        border-bottom: 1px solid #dfdfdf;
        dt,
        dd {
          float: left;
          height: 62px;
          line-height: 62px;
          font-size: 14px;
          margin-right: 40px;
        }
        dt {
          font-size: 16px;
        }
        dd:last-child {
          margin-right: 0;
        }
      }
      .rf-score {
        height: 62px;
        line-height: 62px;
        font-size: 16px;
        text-align: right;
      }
    }
    .el-collapse-item__wrap{
      box-shadow: 0 10px 30px #dfdfdf;
      padding: 20px 30px;
    }
    .el-collapse-item__arrow{
      line-height: 71px;
      margin-right:30px;
    }
  }
}
</style>
